<!--
 * @Date: 2022-11-12 10:57:50
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-19 12:54:46
 * @FilePath: \vue-admin-ts\src\views\main\components\NavHeader\index.vue
 * @Description: NavHeader
-->
<template>
  <div class="nav_header_container">
    <div @click="changeOpenHandle">
      <el-icon v-if="!isOpen" size="30"><i-ep-TurnOff /></el-icon>
      <el-icon v-else size="30" color="green"><i-ep-Open /></el-icon>
    </div>
    <div class="content">
      <div>面包屑</div>
      <div>
        <user-info />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import userInfo from "./components/userInfo.vue";
const emits = defineEmits(["openChange"]);

const props = defineProps({
  clickChange: {
    type: Function,
    default: () => {},
  },
});
const isOpen = ref(true);
const changeOpenHandle = () => {
  isOpen.value = !isOpen.value;
  emits("openChange", isOpen.value);
};
</script>
<style lang="less" scoped>
.nav_header_container {
  display: flex;
  align-items: center;
  width: 100%;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-left: 10px;
  }
}
</style>
